{% spaceless %}
<div class="widget">
	<div class="widget-header">
		<span class="title"><i class="icos-multiple-users"></i> Participations</span>
		{% if is_granted('EDIT',event) %}
		<div class="toolbar">
			<ul id="plug-participants-menu" class="nav nav-tabs">
            	<li class="active"><a data-toggle="tab" href="#plug-participants-list">Tous</a></li>
	            <li class="dropdown pull-right">
		            <a data-toggle="dropdown" href="#"><i class="icon-pencil"></i> Editer <b class="caret"></b></a>
		            <ul class="dropdown-menu">
			            <li class=""><a data-toggle="tab" href="#plug-participants-contacts"><i class="icol-user"></i> Par contacts</a></li>
			            <li class=""><a data-toggle="tab" href="#plug-participants-groups"><i class="icol-group"></i> Par groupes</a></li>
		            </ul>
	            </li>
            </ul>
		</div>
		{% endif %}
	</div>
	
	<div id="plug-participants-actions" style="padding: 0px; display:none;" class="toolbar btn-toolbar">
    	<div class="btn-group">
    		<button class="btn" type="button" id="plug-participants-save"><i class="icol-accept"></i> Modifier</button>
    		{% if event.id != 0 %}<button class="btn" type="button" id="plug-participants-cancel"><i class="icol-cancel"></i> Annuler</button>{% endif %}
    	</div>
    </div>
		    		
	<div class="widget-content no-padding form-container no-border">
		<div class="tab-content" style="padding: 0px;">
			<div id="plug-participants-list" class="tab-pane active">
				<div id="plug-participants-resume" class="goal" style="padding:15px;">
					<div class="well goal-header">
						<div class="row-fluid">
							<div class="info span3">
								<span id="plug-participants-resume-count-2">0</span> 
								<small>Participe</small>
							</div>
							<div class="info span3">
								<span id="plug-participants-resume-count-1">0</span> 
								<small>Ne sait pas</small>
							</div>
							<div class="info span3">
								<span id="plug-participants-resume-count-3">0</span> 
								<small>Absent</small>
							</div>
							<div class="info span3">
								<span id="plug-participants-resume-count-0">0</span> 
								<small>Invité</small>
							</div>
						</div>
					</div>
					
					<div class="progress progress-small progress-striped active">
						<div id="plug-participants-resume-bar-participant" style="width: 0%; " class="bar bar-success"></div>
						<div id="plug-participants-resume-bar-dontknow" style="width: 0%; " class="bar bar-info"></div>
						<div id="plug-participants-resume-bar-absent" style="width: 0%; " class="bar bar-danger"></div>
					</div>
					
					<ul class="ticks" style="margin:0;">
						<li style="left: 50%; margin-left: -50px;"><span></span></li>
					</ul>
					
					<hr>
					
					<div class="row-fluid" id="plug-participants-states">
						<div class="span3" style="text-align:center"><input class="plug-participants-state-2" type="checkbox" checked="checked" /> Participe</div>
						<div class="span3" style="text-align:center"><input class="plug-participants-state-1" type="checkbox" checked="checked" /> Ne sait pas</div>
						<div class="span3" style="text-align:center"><input class="plug-participants-state-3" type="checkbox" checked="checked" /> Absent</div>
						<div class="span3" style="text-align:center"><input class="plug-participants-state-0" type="checkbox" checked="checked" /> Invité</div>
					</div>
				</div>
				
		    	<ul>
		    	{% for name, index in participants %}
			    	<li data-group="{{ name }}">
				        <a class="title">{{ index.title }}</a>
			    	{% if index.values|length > 0 %}
				        <ul>
		    			{% for participantEvent in index.values %}
					        <li>
						        <a class="plug-participants-participant muted" href="#">
							        <input type="hidden" class="plug-participants-participant-id" value="{{ participantEvent.participant.id }}" />
							        <input type="hidden" class="plug-participants-participant-state" value="{{ participantEvent.participationState }}" />
							        <span class="plug-participants-participant-contact">{{ participantEvent.participant.firstname }} {{ participantEvent.participant.name }}</span> 
							        <span class="plug-participants-participant-info" style="font-size: 11px; display: block;" class="muted">Info fonction + société</span>
								</a>
					        </li>
				        {% endfor %}
				        </ul>
				    {% endif %}
			        </li>
		    	{% endfor %}
		    	</ul>
		    </div> 
		    
		    <div id="plug-participants-contacts" class="tab-pane">	
		    	<form class="form-vertical" id="plug-participants-contacts-form">
					<div class="alert alert-success">
						<div>
							<span id="plug-participants-contacts-number"></span>
							<a id="plug-participants-contacts-visibility" href="#" class="pull-right">Afficher</a>
						</div>
						
						<div id="plug-participants-contacts-guests" class="controls" style="display:none;">
						{% for name, index in participants %}
							{% for participantEvent in index.values %}
		                   	<label class="checkbox">
		                   		<input type="checkbox" checked="checked" value="{{ participantEvent.participant.id }}" /> 
		                   		<span>{{ participantEvent.participant.firstname }} {{ participantEvent.participant.name }}</span>
		                   	</label>
		                   	{% endfor %}
		                {% endfor %}
		                </div>
					</div>

					<div class="control-group">
		            	<label for="plug-participants-contacts-search" class="control-label">Chercher un contact <span class="pull-right"><a id="plug-participants-contacts-search-add" href="#"><i class="icon-plus"></i> Ajouter</a> / <a id="plug-participants-contacts-search-remove" href="#"><i class="icon-minus"></i> Enlever</a></span></label>
		            	<div class="controls">
							<select id="plug-participants-contacts-search" class="span12">
							{% for accounts in contacts %}
								{% for contact in accounts.directory %}
			    				<option value="{{ contact.id }}">{{ contact.firstname }} {{ contact.name }}</option>
			    				{% endfor %}
			    			{% endfor %}
			    			</select>
			    		</div>
			    	</div>
			    	
			    	{% include 'IMTPluginsParticipantsBundle:Contacts:contact-directory.html.twig' with {'contacts' : contacts, 'type' : 'contacts'} %}
			   	</form>
			</div>
			 
			<div id="plug-participants-groups" class="tab-pane">  	
			   	<form class="form-vertical" id="plug-participants-groups-form">
					<div class="alert alert-success">
						<div>
							<span id="plug-participants-groups-number"></span>
							<a id="plug-participants-groups-visibility" href="#" class="pull-right">Afficher</a>
						</div>
						
						<div id="plug-participants-groups-guests" class="controls" style="display:none;">
						{% for name, index in participants %}
							{% for participantEvent in index.values %}
		                   	<label class="checkbox">
		                   		<input type="checkbox" checked="checked" value="{{ participantEvent.participant.id }}" /> 
		                   		<span>{{ participantEvent.participant.firstname }} {{ participantEvent.participant.name }}</span>
		                   	</label>
		                   	{% endfor %}
		                {% endfor %}
		                </div>
					</div>
					
					<div class="control-group">
		            	<label for="plug-participants-groups-search" class="control-label">Chercher un contact <span class="pull-right"><a id="plug-participants-groups-search-add" href="#"><i class="icon-plus"></i> Ajouter</a> / <a id="plug-participants-groups-search-remove" href="#"><i class="icon-minus"></i> Enlever</a></span></label>
		            	<div class="controls">
							<select id="plug-participants-groups-search" class="span12">
							{% for group in groups %}
								{% for contact in group.directory %}
			    				<option value="{{ contact.id }}">{{ contact.firstname }} {{ contact.name }}</option>
			    				{% endfor %}
			    			{% endfor %}
			    			</select>
			    		</div>
			    	</div>
			    	
			    	{% include 'IMTPluginsParticipantsBundle:Contacts:contact-directory.html.twig' with {'contacts' : groups, 'type' : 'groups'} %}
			   	</form>
			</div>
	    </div>                                
	</div>
</div>
{% endspaceless %}